<template>
  <div id="Flow">
    <div class="jx-content">
      <div class="topcoumt">
        <div class="search-box fl">
          <el-form :inline="true" :model="Form" class="fl">
            <el-form-item label="学校">
              <el-select
                v-model="Form.schoolName"
                filterable
                remote
                placeholder="请输入学校信息"
                :remote-method="remoteMethod"
              >
                <el-option
                  v-for="(item,index) in options"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用户信息">
              <el-input v-model="Form.info" placeholder="请输入教师信息" maxlength="20"></el-input>
            </el-form-item>
            <el-form-item label="角色 ：">
              <el-select :clearable="true" v-model="Form.role" placeholder="请选择角色">
                <el-option
                  v-for="item in Form.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间段" style="display:block;">
              <el-date-picker
                  v-model="timeValue"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-form>
          <button class="button-style" @click="searchFn">搜 索</button>
        </div>
        <div class="btn-group fr">
          <button class="button-style" style="margin-left:10px;" @click="deleteAll">批量删除</button>
          <button class="button-style" style="margin-left:10px;" @click="downLoad">下 载</button>
        </div>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column prop="name" label="用户名称"></el-table-column>
          <el-table-column prop="userNumber" label="工号/学号"></el-table-column>
          <el-table-column prop="roleName" label="角色">
            <template slot-scope="scope">
              <span v-if="scope.row.roleName == ''">-</span>
              <span v-else>{{ scope.row.roleName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="省份">
            <template slot-scope="scope">
              <span v-if="scope.row.province === '' || scope.row.province === undefined">-</span>
              <span v-else>{{ scope.row.province }}</span>
            </template>
          </el-table-column>
          <el-table-column label="登录省份">
            <template slot-scope="scope">
              <span v-if="scope.row.region === '' || scope.row.region === undefined">-</span>
              <span v-else>{{ scope.row.region }}</span>
            </template>
          </el-table-column>
          <el-table-column label="学校">
            <template slot-scope="scope">
              <span v-if="scope.row.schoolName === '' || scope.row.schoolName === undefined">-</span>
              <span v-else>{{ scope.row.schoolName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="eventDesc" label="请求名称"></el-table-column>
          <el-table-column width="100" prop="operationCreateTime" label="请求时间"></el-table-column>
          <el-table-column label="申请人">
            <template slot-scope="scope">
              <span v-if="scope.row.applicant === '' || scope.row.applicant === undefined">-</span>
              <span v-else>{{ scope.row.applicant }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="createTime" label="注册日期"> </el-table-column> -->
          <el-table-column label="截止日期">
            <template slot-scope="scope">
              <span v-if="scope.row.destroyTime === '' || scope.row.destroyTime === undefined">-</span>
              <span v-else>{{ scope.row.destroyTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="statusName" label="状态"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="cancel(scope.row.userId)"
                v-if="scope.row.showAccountCancellation==true && scope.row.roleName != '学生'"
              >销户</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeValue:'',
      Form: {
        info: "",
        role: "",
        schoolName: "",
        options: [
          { label: "普通教师" },
          { label: "高校教师" },
          { label: "销售教师" },
          { label: "学生" }
        ],
      },
      options:[],
      value: [],
      list: [],
      selectList: [],
      currentPage: 1,
      pagesize: 10,
      totalCount: 1000,
      tableData: [],
      multipleSelection: [],
      loading: false
    };
  },
  created() {
    this.getSelectList();
    this.init();
  },
  methods: {
    init() {
      let self = this;
      let startTime = '';
      let endTime = ''; 
      if(self.timeValue){
          startTime = self.timeValue[0]
          endTime = self.timeValue[1]
      }
      self.$http
        .get(
          "/tes/operation/page?pageNum=" +
            self.currentPage +
            "&pageSize=" +
            self.pagesize +
            "&userInfo=" +
            self.Form.info +
            "&roleName=" +
            self.Form.role +
            "&schoolName=" +
            self.Form.schoolName + 
            '&startTime=' + 
            startTime + 
            '&endTime=' + 
            endTime
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.tableData = res.data.content;
            self.totalCount = res.data.total;
          } else {
            self.$message.error(res.message);
          }
        });
    },
    remoteMethod(query) {
      if (query !== "") {
        this.options = this.selectList.filter(item => {
            return item.indexOf(query) > -1;
        });
      } else {
        this.options = [];
      }
    },
    getSelectList() {
      let self = this;
      self.$http.get("/tes/user/schoolName").then(response => {
        let res = response.data;
        if (res.code == "200") {
          console.log(res);
          self.selectList = res.data;
        } else {
          self.$message.error(res.message);
        }
      });
    },
    //分页
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
      this.init();
    },
    //搜索
    searchFn() {
      this.currentPage = 1;
      this.init();
    },
    //全选
    handleSelectionChange(val) {
      let valArr = [];
      for (let i = 0; i < val.length; i++) {
        valArr.push(val[i].id);
      }
      this.multipleSelection = valArr;
    },
    //下载
    downLoad() {
      let self = this;
      let startTime = '';
      let endTime = ''; 
      if(self.timeValue){
          startTime = self.timeValue[0]
          endTime = self.timeValue[1]
      }
      self.$http
        .post(
          "/tes/operation/export",
          {
            roleName: self.Form.role,
            userInfo: self.Form.info,
            schoolName:self.Form.schoolName,
            startTime:startTime,
            endTime:endTime
          },
          { responseType: "blob" }
        )
        .then(response => {
          let contentType = response.headers["content-type"];
          if (contentType == "application/json;charset=UTF-8") {
            self.$message.error(
              decodeURIComponent(response.headers["code-message"])
            );
          } else {
            let blob = new Blob([response.data], {
              type: response.headers["content-disposition"]
            });
            let url = window.URL.createObjectURL(blob);
            let fileName = "账号流水.xls";
            let downloadElement = document.createElement("a");
            downloadElement.style.display = "none";
            downloadElement.href = url;
            downloadElement.download = fileName; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(url);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //批量删除
    deleteAll() {
      let self = this;
      if (self.multipleSelection.length == 0) {
        self.$message({
          message: "请选择要删除的内容",
          type: "warning"
        });
        return;
      }
      self
        .$confirm("是否删除选中?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          self.$http
            .post("/tes/operation/batch-delete", self.multipleSelection)
            .then(
              response => {
                let res = response.data;
                if (res.code == "200") {
                  self.$message({
                    message: "删除成功",
                    type: "success"
                  });
                  self.init();
                } else {
                  self.init();
                  self.$message.error(res.message);
                }
              },
              err => {
                console.log("err");
              }
            );
        })
        .catch(() => {});
    },
    //注销
    cancel(id) {
      let self = this;
      self
        .$confirm("是否确定销户?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          self.$http
            .put("/tes/user/" + id + "/status", {
              status: 2
            })
            .then(
              response => {
                let res = response.data;
                if (res.code == "200") {
                  self.$message({
                    message: "注销成功",
                    type: "success"
                  });
                  self.init();
                } else {
                  self.init();
                  self.$message.error(res.message);
                }
              },
              err => {
                console.log("err");
              }
            );
        })
        .catch(() => {});
    }
  }
};
</script>
<style scoped>
.el-form-item >>> .el-input__inner {
  width: 200px;
}
</style>
<style lang="scss">
@import "./../../../styles/layout/color_variables";
#Flow {
  .sch .el-input__inner{
    width:100px;
  }
  .el-range-editor.el-input__inner{
        padding:0;
        width:400px;
    }
    .el-icon-date{
        padding:0 0 0 20px;
    }
  width: $width;
  margin: 20px auto;
  color: #727272;
  .topcoumt {
    overflow: hidden;
  }
  .btn-box {
    .button-style {
      margin-right: 10px;
    }
  }
}
</style>
